<template>
    <div class="login">
        <div class="login-logo">
            <img src="../../assets/images/logo.png" alt="" />
        </div>
        <div class="login-content">
            <!-- <div class="login-input">
                <input type="text" v-model="mobile" :placeholder="$t('login.doc85')" />

            </div>
            <div class="login-input">
                <input type="password" maxlength="20" v-model="pasword" :placeholder="$t('new.doc20')"
                    @change="handlerPsd" />

            </div>
            <div class="login-input">
                <input type="password" maxlength="20" v-model="conpasword" :placeholder="$t('login.password2')"
                    @change="handlerConPsd" />

            </div>
            <div class="login-input">
                <input type="text" v-model="invitecode" :placeholder="$t('login.doc84')" />

            </div> -->

            <div class="loginItem">
                <p>{{$t('login.doc89')}}</p>
                <input type="text" v-model="mobile" :placeholder="$t('login.doc85')">
            </div>
            <div class="loginItem">
                <p>{{$t('login.doc90')}}</p>
                <input class="passwordInput" :type="passwordType" v-model="pasword" :placeholder="$t('new.doc20')">
                <div class="showBtn" @click="switchPasswordType">
                    <van-icon name="eye" color="#000000" v-if="passwordType == 'password'"></van-icon>
                    <van-icon name="closed-eye" color="#000000" v-else></van-icon>
                </div>
            </div>
            <div class="loginItem">
                <p>{{$t('login.doc91')}}</p>
                <input class="passwordInput" :type="password2Type" v-model="conpasword" :placeholder="$t('login.password2')">
                <div class="showBtn" @click="switchPassword2Type">
                    <van-icon name="eye" color="#000000" v-if="password2Type == 'password'"></van-icon>
                    <van-icon name="closed-eye" color="#000000" v-else></van-icon>
                </div>
            </div>
            <div class="loginItem">
                <p>{{$t('login.doc92')}}</p>
                <input type="text" v-model="invitecode" :placeholder="$t('login.doc84')">
            </div>

        </div>
        <div class="login-text">
            <img src="../../assets/images/set/ico_check_on2.png" alt="" v-if="if_check" @click="if_check = false" />
            <img src="../../assets/images/set/i_check_off.png" alt="" v-else @click="if_check = true" />
            {{ $tc("reg.txt", 1)
            }}<span @click="arc">{{ $tc("reg.txt", 2) }}</span>
        </div>
        <div class="login-btn flexcenter" @click="handlerRegister"
            :class="{ btnact: mobile != '' && pasword != '' && conpasword != '' && invitecode != '' }">
            {{
                    $t('title.reg')
            }}</div>
        <div class="login-tips">
            {{ $tc('login.login_now', 1) }}
            <span @click="$router.push('/login')">{{ $tc('login.login_now', 2) }}</span>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            mobile: '',
            pasword: '',
            conpasword: '',
            invitecode: '',
            passwordType: 'password',
            password2Type: 'password',
            isBtn: true,
            if_check: true
        }
    },
    mounted() {
        if(this.$route.query.inviteCode != undefined){
            this.invitecode=this.$route.query.inviteCode;
        }
    },
    methods: {
        arc() {
            if ("jp" === this.$i18n.locale) {
                this.$router.push("/user/doc_jp");
            } else {
                this.$router.push("/user/doc");
            }
        },
        handlerPsd(pwd) {
            let reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/;
            if (this.pasword.length < 6) {
                this.$toast(this.$t('new.doc20'))
            }
        },
        handlerConPsd() {
            if (this.pasword != this.conpasword) {
                this.$toast(this.$t('login.doc101'))
            }
        },
        handlerRegister() {
            let _this=this;
            if (!this.if_check) {
                this.$toast.fail(this.$t("login.p_read_agentment"));
                return;
            }
            let reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/;
            if (this.pasword.length < 6) {
                this.$toast(this.$t('new.doc20'));
                return;
            }
            if (this.pasword != this.conpasword) {
                this.$toast(this.$t('login.doc101'));
                return;
            }
            if (this.mobile != '' && this.pasword != '' && this.conpasword != '' && this.invitecode != '' && this.isBtn) {
                this.isBtn = false;
                let loginPassword=this.pasword.toString();
               this.$post(this.URL.user.reg, {
                    accountType: 2,
                    account: this.mobile,
                    inviteCode: this.invitecode,
                    loginPassword: this.$md5(loginPassword)
                }).then(res => {
                    if (res.code == 0) {
                        this.$toast.success(this.$t("login.reg_successed"));
                        // setTimeout(() =>{
                        //     _this.$router.push('/login')
                        // })
                        localStorage.setItem('token',res.data.token)
                        setTimeout(() =>{
                            _this.$router.push('/home')
                        })
                    } else {
                        this.isBtn=true;
                        this.$toast(res.message);
                    }
                })
            }
        },
        switchPasswordType() {
            this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
        },
        switchPassword2Type() {
            this.password2Type = this.password2Type === 'password' ? 'text' : 'password'
        }
    }
}
</script>

<style lang="less" scoped>
.login {
    .login-logo {
        padding: 1rem 0 .1rem;
        text-align: center;

        img {
            height: 1.79rem;
        }
    }

    .login-tab {
        padding: 0 .6rem;
        display: flex;

        div {
            flex: 0 0 50%;
            padding-bottom: .2rem;
            font-size: .34rem;
            color: #999999;
            text-align: center;
        }

        .act {
            position: relative;
            color: #2A64E4;

            &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                width: 0.46rem;
                height: 0.06rem;
                background: #2a64e4;
                transform: translateX(-50%);
            }
        }
    }



    .login-text {
        padding: 0 .6rem 0.3rem;
        display: flex;
        font-size: .26rem;
        color: #999999;
        line-height: .3rem;

        img {
            width: .28rem;
            height: .28rem;
            margin-right: .14rem;
        }

        span {
            color: #2A64E4;
        }
    }

  .login-content {
    padding: 0.2rem .6rem 0;

    .login-input {
      padding: 0 .26rem;
      height: .96rem;
      border: 0.02rem solid #172941;background: #172941;
      border-radius: .16rem;
      box-sizing: border-box;
      display: flex;
      margin-bottom: .16rem;
      input {background: none;}



      &:hover {
        border: 0.02rem solid #1f304a;
      }

      input {
        flex: 1;
        border: 0;
        height: .92rem;
        font-size: .3rem;

        &::placeholder {
          color: #B0B3BE;
        }
      }

      .mobile-code {
        font-size: .32rem;
        color: #333333;
        line-height: .92rem;
        display: flex;

        img {
          width: 0.22rem;
          height: 0.14rem;
          margin: .4rem 0 0 .16rem;
        }
      }

      .send-code {
        font-size: .28rem;
        color: #B0B3BE;
        line-height: .94rem;
      }
    }
    .loginItem{
        position: relative;
        display: flex;
        flex-direction: column;
        margin-bottom: .6rem;
        p{
            color: #333333;
            margin-bottom: .16rem;
        }
        input {
            color: #333333;
            height: .48rem;
            background: none;
            border: none;
            border-bottom: 1px solid #D1D4D9;
            &::placeholder {
                color: #B0B3BE;
            }
        }
    }
    .showBtn{
        position: absolute;
        top: .6rem;
        right: .08rem;
    }
  }

  .login-btn {
    width: 6.3rem;
    height: 0.96rem;
    margin: 0 auto;
    background: #E9EAED;
    border-radius: 0.16rem;
    font-size: .32rem;
    color: #FFFFFF;
  }

  .btnact {
    background: #713FF5;
    color: #fff;
  }



  .login-tips {
        margin-top: .4rem;
        text-align: center;
        font-size: .28rem;
        color: #666;

        span {
            color: #999;
        }
    }
}
</style>
